<%@ page language="java" pageEncoding="ISO-8859-1"%>

<%@ taglib uri="/WEB-INF/tld/struts-layout.tld" prefix="la"%>
<%@ taglib uri="/WEB-INF/tld/c.tld" prefix="c"%>
<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>

<la:html key="geo.reporte.title">
<head>
	<html:base />
	<script
		src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBTfNr5UEQLT8GRTB7pSzkC2Mqfn4hRK-i12rXVdHRCdEZNxKJmdvtm4Rg"
		type="text/javascript"></script>
	<script
		src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBTfNr5UEQLT8GRTB7pSzkC2Mqfn4hRK-i12rXVdHRCdEZNxKJmdvtm4Rg"
		type="text/javascript"></script>

	<script
		src="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.js"
		type="text/javascript"></script>
	<%--AGREGADO		--%>
	<link type="text/css" rel="Stylesheet" media="screen"
		href="css/redInfoWindow.css" />
	<%--AGREGADO		--%>
	<link
		href="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.css"
		rel="stylesheet" type="text/css" />

	<style type="text/css">
    .gsmsc-mapDiv {  
      height : 400px; 
    } 

    .gsmsc-idleMapDiv { 
      height : 400px; 
    } 
 
    #mapsearch { 
      width : 600px; 
      margin: 10px; 
      padding: 4px; 
    }
<%--AGREGADO    --%>
      #map{
        width: 49%;
        height: 400px;
        float: left;
      }
      #demo_explanation{
        border-right: 1px solid #000;
        float: left;
        width: 49%;
        margin-right: 5px;
        padding-right: 5px;
        font-size: .9em;
      }
      iframe{
        background-color: #DDD;
        border: 0;
        margin-left: 20px;
        font-size: .9em;
      } 
<%--AGREGADO          --%>
  </style>
</head>
<body onunload="GUnload()">

	<la:form action="/administrarTematicos" styleClass="FORM"
		key="geo.reporte.subtitle1">
		<html:hidden property="posicionWizzard" value="4" />
		<html:hidden property="currentForward"
			value="VISUAL_REPORTE_PUNTUAL_DELITO_FWD" />
		<c:if test="${not empty AdministradorTematicosForm.listaJSONObjects}">
			<c:forEach var='beanJSONString'
				items='${AdministradorTematicosForm.listaJSONObjects}'>
				<html:hidden name="beanJSONString" property="json" />
			</c:forEach>
		</c:if>
		<la:panel>
			<la:text key="geo.tipoReporte" property="tipoReporte" readonly="true"></la:text>
			<la:text key="geo.tipoTematico" property="tipoTematico"
				readonly="true"></la:text>
			<la:text key="geo.fechaInicial" property="SFechaInicial"
				styleClass="LABEL" readonly="true"></la:text>
			<la:text key="geo.fechaFinal" property="SFechaFinal"
				styleClass="LABEL" readonly="true"></la:text>
			<la:text property="tipoDelito" key="TipoDenuncia" readonly="true">
			</la:text>
			<html:hidden property="numeroIntervalos" />
			<la:text property="estado" key="geo.listaDelitos.estado">
			</la:text>
			<la:panel key="geo.reporte.visualizacion">
				<div id="mapsearch" style="width: 600px; height: 450px">
				</div>
				<script src="/CSWeb/modules/comun/js/submits.js" type="text/javascript">
				</script>
				<script src="/CSWeb/modules/comun/js/utils.js" type="text/javascript">
				</script>
				<script src="/CSWeb/modules/comun/js/googleMapFunctions.js"
					type="text/javascript">
				</script>
				<script type='text/javascript'
					src='/CSWeb/dwr/interface/BeanListaZonal.js'></script>
				<script type='text/javascript'
					src='/CSWeb/dwr/interface/AdminTematicoForm.js'></script>
				<script type='text/javascript' src='/CSWeb/dwr/engine.js'></script>
				<script type='text/javascript'
					src='/CSWeb/modules/comun/js/markermanager.js'></script>
				<script type='text/javascript'
					src='/CSWeb/modules/comun/js/extinfowindow.js'></script>
				<script type='text/javascript'
					src='/CSWeb/dwr/interface/BeanListaDelitos.js'></script>
				<script type="text/javascript">

					var map=showMap(15);

					process_it = function (doc) {
						var jsonData = eval("(" + doc + ")");        
						var polygon = new GPolygon(jsonData.lines[0].points, jsonData.lines[0].strokeColor, jsonData.lines[0].strokeWeight, jsonData.lines[0].strokeOpacity, jsonData.lines[0].fillColor, jsonData.lines[0].fillOpacity, {clickable:false});
						map.addOverlay(polygon);
					};          
					GDownloadUrl("/CSWeb/modules/comun/json/jurisdiccion.json", process_it);
					
  			        var mgr;
                    var icons = {};
                    var allmarkers = [];

        			var markers=[];
        			
        			function setupMarkers()
        			{
						BeanListaDelitos.getListaDelitos(arreglo,form.SFechaInicial.value,form.SFechaFinal.value,form.numeroIntervalos.value,f_ListaObjetos);	
        			}
					function f_ListaObjetos(options)
  				    {
						var i=0;
						while (i<options.length)
						{
							var markerOptions;
	  	        			var tinyIcon = new GIcon();
							tinyIcon.iconSize = new GSize(10, 10);
							tinyIcon.iconAnchor = new GPoint(5, 5);
<%--							alert("El valor de i es "+i);--%>
							var geo=eval(options[i]);
							tinyIcon.image ="/CSWeb"+options[i+1];
							markerOptions = { icon:tinyIcon };        										
<%--							alert("El punto "+geo+" tiene icono "+tinyIcon.image);						--%>
							var marker = new GMarker(geo,markerOptions);
	  						markers.push(marker);
							i+=2;
						}

<%--  	        			var tinyIcon = new GIcon();--%>
<%--						tinyIcon.iconSize = new GSize(7, 7);--%>
<%--						tinyIcon.iconAnchor = new GPoint(0, 0);--%>
<%--							tinyIcon.image ="/CSWeb/images/colors/ff33ff.png";--%>
<%--						markerOptions = { icon:tinyIcon };        										--%>
<%--						var point = eval("new GLatLng(-12.092702,-77.063255)");--%>
<%--						var marker = new GMarker(point,markerOptions);--%>
<%--						markers.push(marker);--%>
						mgr.addMarkers(markers,14,17);
						mgr.refresh();														
					}


<%--					function f_ListaObjetos(options)--%>
<%--					{											--%>
<%--						for(i=0;i<options.length;i++)--%>
<%--						{--%>
<%--							var geo=eval(options[i]);--%>
<%--							map.addOverlay(new GMarker(geo,markerOptions));--%>
<%--						}						--%>
<%--					}--%>
						var form = document.AdministradorTematicosForm;
						var arreglo = createStringsArray(form.json);
<%--					arreglo[0]=form.json[0].value;--%>
<%--					arreglo[1]=form.json[1].value;--%>
<%--					arreglo[2]=form.json[2].value;--%>
<%--					alert(arreglo[0]);--%>
<%--					alert(arreglo[1]);--%>
<%--					alert(arreglo[2]);--%>

	        			mgr = new MarkerManager(map, {trackMarkers:true});
	        			map.setCenter(new GLatLng(-12.091737, -77.067632), 15);
        				window.setTimeout(setupMarkers, 0);
    			</script>
			</la:panel>
			<la:formActions>
				<la:image property="btnGuardar" srcKey="image.guardar"
					altKey="image.guardar.alttext" bundle="bundle.image">
				</la:image>
				<la:image property="btnRegresar" srcKey="image.regresar"
					altKey="image.regresar.alttext" bundle="bundle.image">
				</la:image>
				<la:image property="btnCancelar" srcKey="image.cancelar"
					altKey="image.cancelar.alttext" bundle="bundle.image">
				</la:image>
			</la:formActions>
		</la:panel>
	</la:form>
</body>
</la:html>
